<template>
	<div class="app-container">
		<el-form
			:inline="true"
			:model="queryParams"
			label-width="68px"
			ref="queryForm"
			size="small"
			v-show="showSearch">

			<el-form-item label="关键字" prop="name">
				<el-input
					@keyup.enter.native="handleQuery"
					clearable
					placeholder="请输入门店名称/门店介绍"
					v-model="queryParams.name"/>
			</el-form-item>

			<el-form-item label="状态" prop="status">
				<el-select
					clearable
					placeholder="请选择状态"
					v-model="queryParams.status">
					<el-option
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
						v-for="dict in dict.type.sys_carstore_status"/>
				</el-select>

			</el-form-item>
			<el-form-item>
				<el-button
					@click="handleQuery"
					icon="el-icon-search"
					size="mini"
					type="primary">搜索
				</el-button>

				<el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					@click="handleAdd"
					icon="el-icon-plus"
					plain
					size="mini"
					type="primary"
					v-hasPermi="['workflow:store:add']">新增
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					:disabled="single"
					@click="handleUpdate"
					icon="el-icon-edit"
					plain
					size="mini"
					type="success"
					v-hasPermi="['workflow:store:edit']">修改
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					:disabled="multiple"
					@click="handleDelete"
					icon="el-icon-delete"
					plain
					size="mini"
					type="danger"
					v-hasPermi="['workflow:store:remove']">删除
				</el-button>
			</el-col>

			<el-col :span="1.5">
				<el-button
					@click="handleExport"
					icon="el-icon-download"
					plain
					size="mini"
					type="warning"
					v-hasPermi="['workflow:store:export']">导出
				</el-button>
			</el-col>

			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table :data="storeList" @selection-change="handleSelectionChange" v-loading="loading">
			<el-table-column align="center" type="selection" width="55"/>
			<el-table-column align="center" label="主键" prop="id"/>
			<el-table-column align="center" label="门店名称" prop="name"/>
			<el-table-column align="center" label="门店介绍" prop="intro"/>
			<el-table-column align="center" label="经营范围" prop="businessScope"/>
			<el-table-column align="center" label="联系方式" prop="contact"/>
			<el-table-column align="center" label="门店地址" prop="address"/>

			<el-table-column align="center" label="开店时间" prop="openingTime"/>
			<el-table-column align="center" label="闭店时间" prop="closingTime"/>

			<el-table-column align="center" label="管理员名称" prop="managerName"/>
			<el-table-column align="center" label="管理员手机号" prop="managerTel"/>

			<el-table-column align="center" label="状态" prop="status">
				<template slot-scope="scope">
					<dict-tag
						:options="dict.type.sys_carstore_status"
						:value="scope.row.status"
					/>
				</template>
			</el-table-column>

			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作">
				<template slot-scope="scope">
					<el-button
						@click="handleUpdate(scope.row)"
						icon="el-icon-edit"
						size="mini"
						type="text"
						v-hasPermi="['workflow:store:edit']">修改
					</el-button>
					<el-button
						@click="handleDelete(scope.row)"
						icon="el-icon-delete"
						size="mini"
						type="text"
						v-hasPermi="['workflow:store:remove']"
						v-if="scope.row.status !== 2">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			:limit.sync="queryParams.pageSize"
			:page.sync="queryParams.pageNum"
			:total="total"
			@pagination="getList"
			v-show="total > 0"/>

		<!-- 添加或修改门店信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
			<el-form :model="form" :rules="rules" label-width="100px" ref="form">
				<el-form-item label="门店名称" prop="name">
					<el-input placeholder="请输入门店名称" v-model="form.name"/>
				</el-form-item>
				<el-form-item label="门店介绍" prop="intro">
					<el-input placeholder="请输入门店介绍" v-model="form.intro"/>
				</el-form-item>

				<el-form-item label="管理员" prop="managerId">
					<el-select v-model="form.managerId">
						<el-option v-for="u in users" :value="u.userId" :label="u.nickName"/>
					</el-select>
				</el-form-item>

				<el-form-item label="经营范围" prop="businessScope">
					<el-input placeholder="请输入经营范围" v-model="form.businessScope"/>
				</el-form-item>
				<el-form-item label="联系方式" prop="contact">
					<el-input placeholder="请输入联系方式" v-model="form.contact"/>
				</el-form-item>
				<el-form-item label="门店地址" prop="address">
					<el-input placeholder="请输入门店地址" v-model="form.address"/>
				</el-form-item>

				<el-form-item label="开店时间" prop="openingTime">
					<el-time-picker
						value-format="HH:mm:ss"
						type="time"
						v-model="form.openingTime"
						placeholder="请选择开店时间">
					</el-time-picker>
				</el-form-item>

				<el-form-item label="闭店时间" prop="closingTime">
					<el-time-picker
						value-format="HH:mm:ss"
						type="time"
						v-model="form.closingTime"
						placeholder="请选择开店时间">
					</el-time-picker>
				</el-form-item>

				<el-form-item label="状态" prop="status">
					<el-select placeholder="请选择状态" v-model="form.status">
						<el-option
							:key="dict.value"
							:label="dict.label"
							:value="parseInt(dict.value)"
							v-for="dict in dict.type.sys_carstore_status"/>
					</el-select>
				</el-form-item>

			</el-form>
			<div class="dialog-footer" slot="footer">
				<el-button @click="submitForm" type="primary">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {addStore, delStore, getStore, listStore, updateStore,} from "@/api/workflow/store";
	import {listAllUser} from "@/api/system/user";

	export default {
		name: "Store",
		dicts: ["sys_carstore_status"],
		data() {
			return {
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 门店信息表格数据
				storeList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: null,
					intro: null,
					status: null,
				},
				rules: {
					name: [{required: true, message: "请输入门店信息", trigger: "blur"}],
					managerId: [
						{required: true, message: "请输入管理员id", trigger: "blur"},
					],
					openingTime: [
						{required: true, message: "请选择开店时间", trigger: "blur"},
					],
					closingTime: [
						{required: true, message: "请选择闭店时间", trigger: "blur"},
					],
					contact: [
						{required: true, message: "请输入联系方式", trigger: "blur"},
					],
					address: [
						{required: true, message: "请输入门店地址", trigger: "blur"},
					],
					status: [{required: true, message: "请选择状态", trigger: "blur"}],
					businessScope: [
						{required: true, message: "请输入经营范围", trigger: "blur"},
					],
				},
				// 表单参数
				form: {},
			};
		},
		created() {
			this.getList();

			// 查询所有用户信息
			listAllUser().then(res => {
				this.users = res.data
			})
		},
		methods: {
			/** 查询门店信息列表 */
			getList() {
				this.loading = true;
				listStore(this.queryParams).then((response) => {
					this.storeList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					name: null,
					intro: null,
					businessScope: null,
					contact: null,
					address: null,
					openingTime: null,
					closingTime: null,
					managerId: null,
					managerName: null,
					managerTel: null,
					status: null,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加门店信息";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				getStore(id).then((response) => {
					this.form = response.data;
					this.open = true;
					this.title = "修改门店信息";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.form.status === 2) {
							this.$message.error("更新时不允许更新状态为删除");
						} else {
							if (this.form.id != null) {
								updateStore(this.form).then((response) => {
									this.$modal.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								});
							} else {
								addStore(this.form).then((response) => {
									this.$modal.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								});
							}
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal
					.confirm('是否确认删除门店信息编号为"' + ids + '"的数据项？')
					.then(function () {
						return delStore(ids);
					})
					.then(() => {
						this.getList();
						this.$modal.msgSuccess("删除成功");
					})
					.catch(() => {
					});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"workflow/store/export",
					{
						...this.queryParams,
					},
					`store_${new Date().getTime()}.xlsx`
				);
			},
		},
	};
</script>
